<div>
  <a [href]="['/login']">返回登录</a>
</div>
<div>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <!--
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid E-mail!">
        <input nz-input formControlName="email" id="email"/>
      </nz-form-control>
    </nz-form-item>
    -->

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="loginName">用户名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="用户名不正确!">
        <input nz-input formControlName="loginName" id="loginName"/>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>设置密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请设置密码!">
        <input nz-input type="password" id="password" formControlName="password"
               (ngModelChange)="updateConfirmValidator()"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>再次输入密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTpl">
        <input nz-input type="password" formControlName="checkPassword" id="checkPassword"/>
        <ng-template #errorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请再次输入一次密码!
          </ng-container>
          <ng-container *ngIf="control.hasError('confirm')">
            两次密码输入不一致!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>
          <span>
            姓名
            <i nz-icon nz-tooltip nzTooltipTitle="想我们怎么称呼您呢？" nzType="question-circle"
               nzTheme="outline"></i>
          </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入一个昵称!">
        <input nz-input id="name" formControlName="name"/>
      </nz-form-control>
    </nz-form-item>
    <!--
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>Phone Number</nz-form-label>
      <nz-form-control
        [nzSm]="14"
        [nzXs]="24"
        [nzValidateStatus]="validateForm.controls['phoneNumber']"
        nzErrorTip="Please input your phone number!">
        <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
          <ng-template #addOnBeforeTemplate>
            <nz-select formControlName="phoneNumberPrefix" class="phone-select">
              <nz-option nzLabel="+86" nzValue="+86"></nz-option>
              <nz-option nzLabel="+87" nzValue="+87"></nz-option>
            </nz-select>
          </ng-template>
          <input formControlName="phoneNumber" id="'phoneNumber'" nz-input/>
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>


    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="website" nzRequired>Website</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input website!">
        <input nz-input id="website" formControlName="website" placeholder="website" />
      </nz-form-control>
    </nz-form-item>


    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>Captcha</nz-form-label>
      <nz-form-control
        [nzSm]="14"
        [nzXs]="24"
        nzErrorTip="Please input the captcha you got!"
        nzExtra="We must make sure that your are a human.">
        <div nz-row [nzGutter]="8">
          <div nz-col [nzSpan]="12">
            <input nz-input formControlName="captcha" id="captcha"/>
          </div>
          <div nz-col [nzSpan]="12">
            <button nz-button (click)="getCaptcha($event)">Get captcha</button>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    -->

    <nz-form-item nz-row class="register-area">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <label nz-checkbox formControlName="agree">
          <span>我已阅读 <a>《用户协议》</a></span>
        </label>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row class="register-area">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary" [disabled]="!agreed">注册</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>

